<template>
    <div v-html="svgContent"></div>
</template>
<script setup>
import { ref, onMounted, defineEmits  } from 'vue'; 
import $ from 'jquery';
const svgContent = ref(null); // 用于存储SVG内容  
const queryParams = new URLSearchParams(window.location); // 解析URL查询参数
// const ip = queryParams.get('hostname'); // 假设IP地址是通过查询参数传递的
// const ip = "13.81.51.242"// 还是独立出来，方便调试 
const ip = "xianghe"// 还是独立出来，方便调试 
const baseURL = process.env.VITE_BASE_URL;
const emit = defineEmits(['clickVideo']);// 定义要触发的事件  
const clickVideo = function (id) {
    emit("clickVideo",id);
}

onMounted(() => {
  loadSvg()
  setTimeout(function () {
    //从配置文件中加载
    fetch("config/parking/svgVideo_"+ip+".json")
      .then(response => response.json())
      .then(data => {
        if (data.b) {
          data.b.forEach((item, index) => {
            //对应的图标绑定事件，点击即可播放视频
            $("#"+item.id).on("click", function () { 
              clickVideo(item.value)
            })
          })
        }
      })
      .catch(error => {
        console.log("没有配置文件")
      })
  },2000)

})
async function loadSvg() {
    const response = await fetch("config/parking/" + ip + 'B.svg');  
    // const response = await fetch(baseURL+"config/parking/13.81.48.242A.svg");  
    if (!response.ok) {  
      throw new Error('Failed to fetch SVG file');  
    } 
  svgContent.value = await response.text();
}
</script>